<template>
	<div class="zBox">
		<el-table class="qjTable" v-loading="loading" :data="tableList" stripe height="720">
			<el-table-column prop="userName" label="姓名" width="150" align="center"></el-table-column>
			<el-table-column prop="reissueCardDate" label="补卡时间" align="center"></el-table-column>
			<el-table-column prop="applyReason" label="补卡理由" align="center"></el-table-column>
			<el-table-column prop="address" label="补卡位置" align="center"></el-table-column>
			<el-table-column prop="createTime" label="提交时间" align="center"></el-table-column>
			<el-table-column label="状态" align="center">
				<template #default="scope">
					<div class="ztbox">
						<div class="dian" :style="{ background: qjzt[scope.row.status].color }"></div>
						<span :style="{ color: qjzt[scope.row.status].color }">{{ qjzt[scope.row.status].label }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template #default="scope">
					<div class="czan">
						<div v-if="scope.row.status == 0 && isLeader" class="czBut xj" @click="approval(scope.row, 1)">审核</div>
						<div v-if="scope.row.status !== 0 || !isLeader" class="czBut bjckdj" @click="detail(scope.row, 0)">查看</div>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<pagination class="pagination" v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

		<el-dialog class="overDialog" v-model="detailDialogVisible" title="查看详情" top="12vh" width="25%">
			<div class="shbj" v-if="isSp">补卡申请</div>
			<table class="mailTable">
				<tr>
					<td class="column ">姓名</td>
					<td class="nrkd">{{ bkDetail.userName || '无' }}</td>
				</tr>
				<tr>
					<td class="column">补卡时间</td>
					<td class="nrkd">{{ bkDetail.reissueCardDate || '无' }}</td>
				</tr>
				<tr>
					<td class="column">提交时间</td>
					<td class="nrkd">{{ bkDetail.createTime || '无' }}</td>
				</tr>
				<tr>
					<td class="column">补卡理由</td>
					<td class="nrkd">{{ bkDetail.applyReason || '无' }}</td>
				</tr>
				<tr>
					<td class="column">审核人</td>
					<td class="nrkd">{{ bkDetail.auditUserName || '无' }}</td>
				</tr>

				<tr>
					<td class="column">补卡位置</td>
					<td class="nrkd">{{ bkDetail.address || '无' }}</td>
				</tr>
				<tr v-if="!isSp">
					<td class="column">审核意见</td>
					<td class="nrkd">{{ bkDetail.auditReason || '无' }}</td>
				</tr>
			</table>

			<div v-if="isSp" class="shbj">补卡审核</div>
			<el-form v-if="isSp" ref="ruleFormRef" :model="spForm" :rules="spRules" label-width="83px" label-position="top">
				<el-form-item style="width: 100%;" class="flxz" label="审核意见" prop="auditReason"><el-input type="textarea" v-model="spForm.auditReason" rows="3"></el-input></el-form-item>
			</el-form>
			<template v-if="isSp" #footer>
				<span class="dialog-footer">
					<el-form-item class="dw">
						<div class="cx" @click="check(1)">通过</div>
						<div class="cz" @click="check(2)">不通过</div>
					</el-form-item>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { reissueList, getReissue, auditReissue } from '@/api/hkd';
import useUserStore from '@/store/modules/user';
import { ElMessage, ElMessageBox } from 'element-plus';
const { proxy } = getCurrentInstance();
const isLeader = ref(false);
const loading = ref(true);
const isSp = ref(0);
const tableList = ref([]);
const total = ref(0);
const bkDetail = ref({});
const detailDialogVisible = ref(false);
const data = reactive({
	queryParams: {
		pageNum: 1,
		pageSize: 10
	},
	spForm: {
		auditReason: ''
	}
});
const qjzt = ref({
	0: { color: '#FA6400', label: '待审核', img: 'dsh' },
	1: { color: '#1AC45F', label: '通过', img: 'ok' },
	2: { color: '#BE1A21', label: '未通过', img: 'btg' }
});
const dkTime = ref({
	1: '08:30',
	2: '11:30',
	3: '13:30',
	4: '18:00'
});

const { queryParams, spForm } = toRefs(data);
onMounted(() => {
	if (proxy.$route.fullPath.indexOf('repairAttendance') > -1) {
		isLeader.value = true;
	} else {
		isLeader.value = false;
	}
	getList();
});

function approval(row, flag) {
	isSp.value = flag;
	bkDetail.value = row;
	detailDialogVisible.value = true;
}
function detail(row, flag) {
	isSp.value = flag;
	bkDetail.value = row;
	detailDialogVisible.value = true;
}

//补卡审核
function check(type) {
	let form = JSON.parse(JSON.stringify(spForm.value));
	form.id = bkDetail.value.id;
	form.status = type;
	if (type == 2 && form.auditReason == '') {
		ElMessage({ message: '请填写审核意见', type: 'error', duration: 1 * 1000 });
	} else {
		auditReissue(form).then(res => {
			if (res.code == 200) {
				ElMessage({ message: '已审核', type: 'success', duration: 1 * 1000 });
				detailDialogVisible.value = false;
				this.getList();
			} else {
				ElMessage({ message: res.msg, type: 'error', duration: 1 * 1000 });
			}
		});
	}
}

function getList() {
	if (isLeader.value) {
		queryParams.value.type = 2;
	} else {
		queryParams.value.type = 1;
	}
	loading.value = true;
	reissueList(queryParams.value).then(response => {
		tableList.value = response.rows;
		total.value = response.total;
		loading.value = false;
	});
}


</script>

<style lang="scss" scoped>
.qjBut {
	background: #be1a21;
	color: #ffffff;
	width: 100px;
	text-align: center;
	border-radius: 4px;
	padding: 10px 0;
	font-size: 0.875rem;
	cursor: pointer;
}
.dialog-footer button:first-child {
	margin-right: 10px;
}
:deep(.el-form) {
	display: flex;
	.left {
		// height: 100px;
		border-right: 2px dashed #e5e1e1;
	}
}
.userOption {
	display: flex;
	align-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;

	img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	span {
		padding: 0 1rem;
	}
}
.sxm {
	margin-top: 20px;
}
.spBox,
.spBox2 {
	display: flex;
	flex-flow: column;

	p {
		margin-top: 0;
	}
	img {
		width: 45px;
		height: 45px;
		border-radius: 50%;
	}
}
.spBox2 {
	margin-right: 20px;
}
:deep(.left) {
	width: 50%;
	.el-form-item {
		display: flex;
		flex-flow: column;
	}
}
:deep(.right) {
	margin-left: 50px;
	width: 42%;
	.el-form-item {
		display: flex;
		flex-flow: column;
	}
	.spr,
	.csr {
		margin-bottom: 10px;
		.el-form-item__label {
			width: 70px !important;
		}
	}
}
.csrBox {
	margin-top: 20px;
	display: flex;
	max-height: 235px;
	overflow: auto;
	display: flex;
	flex-flow: wrap;
}
.csrBox::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
:deep(.qjTable)  {
	.el-table__header-wrapper,
	.el-table__fixed-header-wrapper {
		th {
			word-break: break-word;
			background-color: #f7f7f7 !important;
			color: #515a6e;
			height: 58px !important;
			font-size: 13px;
			border: none !important;
		}
	}
	.el-table__body-wrapper {
		.el-button [class*='el-icon-'] + span {
			margin-left: 1px;
		}
		.el-table__row {
			td {
				border: none !important;
				height: 55px;
			}
		}
	}
}
.ztbox {
	display: flex;
	align-items: center;
	justify-content: center;
	.dian {
		margin-right: 8px;
		width: 7px;
		height: 7px;
		border-radius: 50%;
	}
}
.czan {
	display: flex;
	justify-content: center;
}
#printDivdyAll {
	margin-top: -23px;
	width: 1000px;
	height: 400px;
	padding: 5px;

	td {
		text-align: center;
		font-size: 18px;
	}

	.zhai {
		height: 60px;
	}

	.shense {
		font-size: 20px;
	}

	table {
		width: 100%;
		height: 100%;
	}
}
.zBox {
	height: 99.8%;
	background-color: #ffffff;
	border-radius: 10px;
	padding: 20px;

}
:deep(.shbj ){
	background: url(../../assets/images/spbj.png) no-repeat;
	color: #be1a21;
	width: 140px;
	background-size: 100% 100%;
	padding: 5px 15px;
	font-size: 14px;
	margin-bottom: 10px;
	font-weight: 600;
}
.sptop {
	margin-top: 20px;
}
:deep(.bz) {
	.el-form-item__label {
		width: 50px !important;
	}
}
.red {
	color: #ff0000;
}
.spzt {
	width: 20px;
	height: 20px;
	display: inline-block;
	background-size: contain;
	margin-right: 10px;
}
.jdbox {
	position: relative;
}
.jdbox:last-child .xuLine {
	display: none;
}
.xuLine {
	position: absolute;
	width: 1px;
	height: 17px;
	border-left: 2px dashed rgb(204, 204, 204);
	left: 9px;
	top: 20px;
}
.mailTable {
	.nrkd {
		width: 75%;
	}
}
:deep(.dw){
	.el-form-item__content {
		display: flex;
		justify-content: end;
	}
	.cz {
		margin-left: 20px;
	}
}
:deep(.shbj) {
	background: url(../../assets/images/spbj.png) no-repeat;
	color: #be1a21;
	width: 140px;
	background-size: 100% 100%;
	padding: 5px 15px;
	font-size: 14px;
	margin-bottom: 10px;
	font-weight: 600;
	margin-top: 10px;
}
</style>
